import React from 'react';
import { Tabbar } from 'react-vant';
import { AppsO, WapHomeO, CartO, UserO  } from '@react-vant/icons';
import { useNavigate } from "react-router-dom"
import "../assent/css/nav.css"

function Vnav() {
    let nav = useNavigate();

    return (
        <div className='demo-tabbar' >
            <Tabbar defaultValue={'home'} activeColor="#ff6040"  onChange={(active)=>{ nav(active)  }} >
                <Tabbar.Item icon={<WapHomeO  />} name="home">首页</Tabbar.Item>
                <Tabbar.Item icon={<AppsO  />} name="items">分类</Tabbar.Item>
                <Tabbar.Item icon={<CartO  />} name='cart'>购物车</Tabbar.Item>
                <Tabbar.Item icon={<UserO  />} name='my'>个人中心</Tabbar.Item>
            </Tabbar>
            
        </div>
    )

}
export default Vnav;


































// import { Component } from 'react'

// class Home extends Component {
//     constructor() {
//         super()
//     }
//     render() {
//         return (
//             <div id='nav'>
//                 <h1>nav</h1>
//             </div>
//         );
//     }
// }
// export default Home